<template>
  <div class="myCenter verify-container">
    <div class="verify-content">
      <div>
        <el-avatar :size="50" :src="$store.state.webInfo.avatar"></el-avatar>
      </div>
      <div>
        <el-input v-model="account">
          <template slot="prepend">账号</template>
        </el-input>
      </div>
      <div @keydown.enter="login()">
        <el-input v-model="password" type="password">
          <template slot="prepend">密码</template>
        </el-input>
      </div>
      <div>
        <proButton :info="'登录'" @click.native="login()" :before="$constant.before_color_2"
          :after="$constant.after_color_2">
        </proButton>
      </div>
    </div>
  </div>
</template>

<script>
const proButton = () => import("../common/proButton");

export default {
  components: {
    proButton
  },
  data() {
    return {
      redirect: this.$route.query.redirect,
      account: "",
      password: ""
    }
  },
  computed: {},
  created() {
    let root = document.querySelector(":root");
    root.style.setProperty("--backgroundPicture", "url(/sys/backend-bg.jpg)");
    const font = new FontFace("poetize-font", "url(/sys/font.woff2)");
    font.load();
    document.fonts.add(font);
  },
  methods: {
    login() {
      if (this.$common.isEmpty(this.account) || this.$common.isEmpty(this.password)) {
        this.$message({
          message: "请输入账号或密码！",
          type: "error"
        });
        return;
      }

      let user = {
        account: this.account.trim(),
        password: this.$common.encrypt(this.password.trim()),
        isAdmin: true
      };

      this.$http.post(this.$constant.baseURL + "/user/login", user, true, false)
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            localStorage.setItem("adminToken", res.data.accessToken);
            this.$store.commit("loadCurrentAdmin", res.data);
            this.account = "";
            this.password = "";
            this.$router.push({ path: this.redirect });
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    }
  }
}
</script>

<style scoped>
.verify-container {
  height: 100vh;
  background: var(--backgroundPicture) center center / cover repeat;
}

.verify-content {
  background: var(--maxWhiteMask);
  padding: 30px 40px 5px;
  position: relative;
  border-radius: 14px;
}

.verify-content>div:first-child {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: -25px;
}

.verify-content>div:not(:first-child) {
  margin: 25px 0;
}

.verify-content>div:last-child>div {
  margin: 0 auto;
}
</style>
